<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue04</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<a v-bind:href="protocal + '//' + host">qq直接拼接URL</a> <br /><br />
			<a v-bind:href="getUrl('getUrl')">{{getUrl('getUrl')}}</a> <br /><br />
			<a v-bind:href="url">{{url}}</a> <br /><br />
			<a v-bind:href="optUrl('optUrl')">{{optUrl('optUrl')}}</a><br /><br />
			<a v-bind:href="testUrl">{{testUrl}}</a>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					protocal: 'http:',
					host: 'www.qq.com'
				},
				methods: {
					getUrl: function(hash) {
						return this.protocal + '//' + this.host + '#' + hash;
					}
				},
				computed: {
					// 计算属性的 getter
					url: function() {
						return this.protocal + '//' + this.host;
					},
					// 要传参数,需要使用 闭包形式
					optUrl: function() {
						return function(hash) {
							return this.protocal + '//' + this.host + '#' + hash;
						}
					},
					// ========================================
					// 除了上面的方法形式,还可以是对象的形式
					// ========================================
					testUrl: {
						// get 用于返回数据,如上面的 <a v-bind:href="testUrl">{{testUrl}}</a> 就是这里返回的,去掉将无展示
						// getter
						get: function() {
							return this.protocal + '//' + this.host;
						},

						// 设置计算属性的值, 若没有这方法,不能赋值,如下 赋值为 百度 的,如没有 下面 set 的方法,会报错没有 setter
						/* 打开浏览器的控制台，自行修改例子中的 vm
						   vm.testUrl = "https://www.baidu.com";
						   vue.js:634 [Vue warn]: Computed property "testUrl" was assigned to but it has no setter.
						   (found in <Root>) */
						// setter
						set: function(val) {
							var temp = val.split('//');
							if (temp.length > 1) {
								this.protocal = temp[0];
								this.host = temp[1];
							}
						},
						// 此时再 vm.testUrl = "https://www.baidu.com"; 会发现改变
					}
				}
			})
		</script>
	</body>
</html>
